<template>
	<view>
		<view class="box">
			<image :src="student.image" mode=""></image>
			<view class="text">
				{{student.sname === undefined ? '' : student.sname}}
			</view>
			<button type="primary" @click="start">开始点人</button>
		</view>

	</view>
</template>

<script>
	import server from "@/util/http.js"
	export default {
		data() {
			return {
				studentList: [],
				student: []
			}
		},
		computed: {},
		methods: {
			start() {
				var timer = setInterval(() => {
					let random = Math.round(Math.random() * this.studentList.length);
					this.student = this.studentList[random];
				}, 30);
				setTimeout(() => {
					clearInterval(timer)
				}, 3000)
			},
			request() {
				server({
					url: `http://127.0.0.1:4523/mock/906666/class`,
					method: 'get',
					success: res => {
						this.studentList = res.data[0].student;
					},
					fail: e => {
						console.log(e);
					}
				});
			}
		},
		onShow() {
			this.request();
		}
	}
</script>

<style scoped>
	page {
		background-color: GhostWhite;
	}

	.box {
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		left: 50%;
		text-align: center;
		font-size: 28px;
	}

	.text {
		margin-top: 20px;
	}

	.box image {
		width: 100px;
		height: 100px;
		border-radius: 50%;
	}

	.box button {
		margin-top: 20px;
	}
</style>
